<template>
	<!-- 20230412 -->
	<view class="swiper-detail-cn width-100p bg-ed position-relative">
		<!-- 组件内容 -->
		<view class="cn-content">
			<swiper :style="{height: height+'rpx'}" @change="change">
				<swiper-item class="width-100p" v-for="(item,index) in list" :key="index">
					<image class="swiper_image" :src="item.image_url" :mode="mode" v-if="item.type == 1"
						@click="preview(index)">
					</image>
					<image class="swiper_image" :src="item.image_url" :mode="mode" v-if="item.type == 2">
					</image>

					<!-- 播放按钮 -->
					<text class="play-btn tyIcon-play text-ff" style="font-size: 120rpx;" v-if="item.type == 2"
						@click="play(item.video_url)"></text>
					<!-- <video class="swiper_video" :src="item.video_url" :id="'video_'+index" object-fit='fill'
						v-if="item.type==2" :enable-progress-gesture="false" @ended="stop(index)"
						v-show="video_show"></video> -->
				</swiper-item>
			</swiper>

			<!-- 轮播图张数 -->
			<view class="swiper-number line-height-50 radius-25 text-center text-24 text-ff" style="width: 80rpx">
				{{active}}/{{list.length}}
			</view>

		</view>

		<!-- 组件浮层 -->
		<view class="cn-layer">
			<ty-layer-pop-up v-if="video_layer_show">
				<view class="bg_block bg-1a" @click.stop="">
					<view class="padding-lr-30 padding-top-50" @click="stop">
						<text class="tyIcon-close-round-line text-48 text-ff"></text>
					</view>
					<view class="swiper_video_content">
						<video class="width-100p height-100p" :src="video_url" id="video" object-fit='contain'
							:loop="loop" :show-fullscreen-btn="showFullscreenBtn" :show-play-btn="showPlayBtn"
							:enable-progress-gesture="enableProgressGesture" @error="videoErrorCallback"
							@play="videoPlay"></video>
					</view>
				</view>
			</ty-layer-pop-up>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				active: 1,
				video_layer_show: false,
				video_url: '',
				videoContext: {},
				loop: true, //是否循环播放视频
				showFullscreenBtn: false, //是否显示全屏按钮
				showPlayBtn: false, //是否显示视频底部控制栏的播放按钮
				enableProgressGesture: false, //是否开启控制进度的手势
			}
		},
		props: {
			// 数据显示
			list: {
				type: Array,
				default: []
			},
			// 轮播图高度，默认单位为rpx
			height: {
				type: Number,
				default: 750
			},
			// 图片裁剪、缩放的模式
			mode: {
				type: String,
				default: 'aspectFill'
			}
		},

		created() {
			//创建并返回 video 上下文 videoContext 对象
			this.videoContext = uni.createVideoContext('video')
		},

		methods: {
			// 点击播放视频
			play(video_url) {
				this.video_layer_show = true
				this.video_url = video_url
				setTimeout(() => {
					this.videoContext.play()
				}, 100)
			},

			//关闭浮层，同时视频停止
			stop() {
				this.video_layer_show = false
				// let videoContext = uni.createVideoContext('video')
				this.videoContext.stop()
			},

			//轮播图滑动
			change(e) {
				this.active = e.detail.current + 1
			},

			//预览图片
			preview(index) {
				let imgList = []
				for (let i = 0; i < this.list.length; i++) {
					if (this.list[i].type == 1) {
						imgList.push(this.list[i].image_url);
					}
				}

				uni.previewImage({
					current: this.list[index].image_url, // 当前显示图片的http链接
					urls: imgList // 需要预览的图片http链接列表
				})
			},

			//监听视频播放出错
			videoErrorCallback(e) {
				console.log('error')
				console.log(e)
			}
		}
	}
</script>

<style scoped>
	.swiper_image {
		display: block;
		overflow: hidden;
		width: 100%;
		height: 100%;
	}

	.bg_block {
		width: 100%;
		height: calc(100vh);
	}

	.swiper_video_content {
		position: fixed;
		left: 0;
		top: calc(10vh);
		width: 100vw;
		height: calc(80vh);
	}

	/* 轮播图张数 */
	.swiper-number {
		position: absolute;
		bottom: 20rpx;
		right: 30rpx;
		background: rgba(0, 0, 0, 0.3);
	}

	/* 播放按钮 */
	.play-btn {
		position: absolute;
		left: calc(50% - 60rpx);
		top: calc(50% - 60rpx);
	}
</style>